import { ref, onMounted } from 'vue'

export function useAnimation() {
    const animateElements = ref<HTMLElement[]>([])

    onMounted(() => {
        const observer = new IntersectionObserver(
            entries => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate-in')
                    }
                })
            },
            {
                threshold: 0.1,
                rootMargin: '0px 0px -100px 0px'
            }
        )

        animateElements.value.forEach(el => {
            observer.observe(el)
        })
    })

    return {
        animateElements
    }
} 